<template>
  <div class="app-container">
    <div v-if="!dialogFormVisible">
      <el-form :inline="true">
        <el-form-item>
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="showAdd"
          >{{ $t('insert') }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="noticeList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="type" :label="$t('type')" :formatter="formatNoticeType"/>
        <el-table-column prop="title" :label="$t('title')"/>
        <el-table-column prop="summary" :label="$t('summary')"/>
        <el-table-column :label="$t('language')">
          <template slot-scope="scope">
            <el-select v-model="scope.row.languageList" multiple disabled>
              <el-option
                v-for="item in languageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('startDate')" sortable width="220">
          <template slot-scope="scope">
            <i class="el-icon-time"/>
            <span style="margin-left: 13px">{{ formatDate(scope.row.publicDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('endDate')" sortable width="220">
          <template slot-scope="scope">
            <i class="el-icon-time"/>
            <span style="margin-left: 13px">{{ formatDate(scope.row.endDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column width="150" :label="$t('function')">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="edit(scope.row)"
            >{{ $t('edit') }}
            </el-button>
            <el-button
              style="color: #f56c6c"
              type="text"
              icon="el-icon-delete"
              @click="del(scope.row)"
            >{{ $t('delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        v-show="mCheck"
        icon="el-icon-delete"
        type="danger"
        round
        style="position: fixed;bottom: 20px;right: 15px;z-index: 1000;"
        circle
        @click="mDel"
      />
      <div style="margin: 15px 0;text-align: right">
        <el-pagination
          background
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="totalNotice"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div
      v-else
      style="margin-bottom: 20px"
    >
      <el-form
        label-width="120px"
        :model="systemNotice"
      >
        <el-form-item :label="$t('title')">
          <el-input v-model="systemNotice.title"/>
        </el-form-item>
        <el-form-item :label="$t('summary')">
          <el-input v-model="systemNotice.summary"/>
        </el-form-item>
        <el-form-item :label="$t('type')">
          <el-select v-model="systemNotice.type">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('language')">
          <el-select v-model="systemNotice.languageList" multiple>
            <el-option
              v-for="item in languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('startDate')">
          <el-date-picker
            v-model="systemNotice.publicDate"
            type="datetime"
            :placeholder="$t('startDate')"
            :picker-options="pickerOptions1"
            value-format="timestamp"
          />
        </el-form-item>
        <el-form-item :label="$t('endDate')">
          <el-date-picker
            v-model="systemNotice.endDate"
            type="datetime"
            :placeholder="$t('endDate')"
            :picker-options="pickerOptions1"
            value-format="timestamp"
          />
        </el-form-item>
        <el-form-item :label="$t('message')">
          <ueditor-from :content="systemNotice"/>
        </el-form-item>
      </el-form>
      <div style="position: fixed;right: 20px;bottom: 20px">
        <el-button @click="dialogFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { cancelNotice, formatDate, formatNoticeType, listLanguage, successNotice } from '@/util/common'
import {
  deleteSystemNotice,
  deleteSystemNoticeList,
  insertSystemNotice,
  pageGetSystemNotice,
  updateSystemNotice
} from '@/api/common/commonSystemNoticeApi'
import UeditorFrom from '@/components/UeditorFrom'
import { getPageSize, setPageSize } from '@/util/storage'
import { getSystemNoticeContentDetails } from '@/api/common/commonSystemNoticeContentApi'

export default {
  name: 'SystemNotice',
  data() {
    return {
      noticeList: [],
      currentPage: 1,
      totalNotice: 0,
      pageSize: getPageSize(),

      dialogFormVisible: false,
      mCheck: false,
      mList: [],
      systemNotice: {},
      pickerOptions1: {
        shortcuts: [
          {
            text: this.$t('today'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('today'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('a') + this.$t('week') + this.$t('ago'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      typeList: [
        {
          value: 'system',
          label: this.$t('system')
        }
        // {
        //   value: 'update',
        //   label: this.$t('update')
        // }
      ],
      languageList: []
    }
  },
  components: {
    UeditorFrom
  },
  mounted() {
    this.languageList = listLanguage(this)
    this.pageGetSystemNotice()
  },
  methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    showAdd() {
      this.systemNotice = {}
      this.dialogFormVisible = true
    },
    addOrUpdate() {
      const json = {
        ...this.systemNotice,
        publicDate: this.systemNotice.publicDate.toString().substr(0, 10),
        endDate: this.systemNotice.endDate.toString().substr(0, 10),
      }

      if (!this.systemNotice.noticeId) {
        insertSystemNotice(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogFormVisible = false
            this.pageGetSystemNotice()
          }
        })
      } else {
        json.noticeId = this.systemNotice.noticeId
        updateSystemNotice(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogFormVisible = false
            this.pageGetSystemNotice()
          }
        })
      }
    },
    edit(item) {
      getSystemNoticeContentDetails({
        noticeId: item.noticeId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.dialogFormVisible = true
          this.systemNotice = data
          this.systemNotice.publicDate = data.publicDate * 1000
          this.systemNotice.endDate = data.endDate * 1000
        }
      })
    },
    formatNoticeType(row) {
      return formatNoticeType(this, row.type)
    },
    handleSelectionChange(val) {
      const mList = []
      val.forEach(function(row) {
        mList.push(row.noticeId)
      })
      this.mList = mList
      if (mList.length > 0) {
        this.mCheck = true
      } else {
        this.mCheck = false
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetSystemNotice()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetSystemNotice()
    },
    mDel() {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteSystemNoticeList({
            idList: that.mList
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetSystemNotice()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    del(item) {
      // alert("-----"+id)
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteSystemNotice({
            noticeId: item.noticeId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetSystemNotice()
              successNotice(that)
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    pageGetSystemNotice() {
      pageGetSystemNotice({
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.totalNotice = data.total
          this.noticeList = data.data
        }
      })
    }
  }
}
</script>
